<script setup lang="ts">
import { HomeOutlined, SketchOutlined } from "@ant-design/icons-vue";
import { useMenuStore } from "../../store/menuStore";
import { RouteLocationNormalizedLoaded, Router } from "vue-router";
import { MenuClickEventHandler } from "ant-design-vue/es/menu/src/interface";
import { renderAsyncRouter } from "@/router";
import { HeadTag } from "@/interface/menu";
import { useGlobalStore } from "@/store/globalStore";

const antIcons: any = inject('antIcons')
const menuStore = useMenuStore();
const router: Router = useRouter();
const route: RouteLocationNormalizedLoaded = useRoute();
const asyncMenu = ref<Array<any>>([]);
const globalStore = useGlobalStore()

const slideBarList = reactive([
  {
    key: "/index",
    icon: () => h(HomeOutlined),
    label: "首页",
    title: "首页",
  },
]);

const handleMenuClick: MenuClickEventHandler = ({ item, key }) => {
  const { title } = item.originItemValue as any;
  menuStore.addDynamicTag({
    title,
    key,
    enableClose: true,
    isActive: true,
  });
  //存储动态标签
  menuStore.saveDynamicTag2Local();
  //切换动态标签
  menuStore.toggleDynamicTag(key);
  router.push(key.toString());
};

const loadAsyncMenu = (menuList: any, prePath = "") => {
  let res: Record<string, any>[] = [];
  for (let menu of menuList) {
    let cur: any = {
      label: menu.name,
      title: menu.name,
      key: prePath + (menu.path.startsWith("/") ? "" : "/") + menu.path, //构造路径
      icon: () => (menu.meta.icon ? h(antIcons[menu.meta.icon]) : ""),
      children: [],
    };
    if (menu.children && menu.children.length != 0) {
      cur.children = loadAsyncMenu(
        menu.children,
        prePath + (menu.path.startsWith("/") ? "" : "/") + menu.path
      );
    }
    if (cur.children.length == 0) {
      delete cur.children;
    }
    res.push(cur);
  }
  return res;
};

onMounted(() => {
  renderAsyncRouter(() => {
    asyncMenu.value = loadAsyncMenu(menuStore.menuList)
    slideBarList.push(...asyncMenu.value);

    //有缓存读取，无缓存根据路由读取
    const preDyTag: HeadTag[] = JSON.parse(localStorage.getItem("dynamicTags") || "[]");
    if (preDyTag.length == 0) {
      menuStore.addDynamicTag({
        key: route.path,
        title: menuStore.pathToName[route.path] || '未命名',
        isActive: true,
        enableClose: true,
      })
    } else {
      menuStore.dynamicTagList = preDyTag;
      menuStore.toggleDynamicTag(route.path);
    }
  }, true)
});
</script>

<template>
  <div class="flex flex-col h-screen transition-[width] relative z-50 dark:bg-darkTabBarBg"
    :class="menuStore.collapsed ? 'w-16' : 'w-64'">
    <div
      class="w-full h-16 flex justify-center items-center px-2 border-r-[1px] border-[rgba(5, 5, 5, 0.06)] dark:border-none"
      v-show="globalStore.logoMode === '1'">
      <SketchOutlined class="text-3xl text-primary" />
      <span class="ml-2 dark:text-white" v-show="!menuStore.collapsed">King</span>
    </div>
    <a-menu v-model:openKeys="menuStore.openKeys" v-model:selectedKeys="menuStore.selectedKeys" mode="inline"
      :theme="globalStore.darkMode === '0' ? 'light' : 'dark'" :inline-collapsed="menuStore.collapsed"
      :items="slideBarList" class="w-full h-full" @click="handleMenuClick" :loading="true"></a-menu>
  </div>
</template>

<style scoped></style>
